<template>
	<AdaptiveNavBar title="我的" :showBack="false" :showHome="true" />
	<view class="app-container">
		<!-- 顶部导航 -->
		<view class="merchant-mine" :style="{ marginTop: $navbarUtil.getNavbarTotalHeightRpx() }">
			<!-- 商户信息卡片 -->
			<view class="merchant-header"
				style="margin-bottom: 0rpx;border-radius: 0rpx;;border-top-left-radius: 24rpx;border-top-right-radius:24rpx ;box-shadow:none;"
				@click="gotoEdit">
				<view class="merchant-logo">
					<image :src="logo" mode="scaleToFill"></image>
				</view>
				<view class="merchant-info">
					<view class="merchant-name">
						<text class="font-weight">{{ merchantItem.shopName || '商家简称' }}</text>
						<text v-if="merchantItem.branchName" class="u-font-22 u-m-l-10 color-999">({{
							merchantItem.branchName || '分店名称' }})</text>
					</view>
					<view class="merchant-company">{{ merchantInfo.name || '企业名称' }}</view>
					<view class="merchant-contact">管理员账号 {{ (merchantItem.phone || merchantInfo.phone ||
						'电话').replace(/(\d{3})\d{4}(\d{4})/, '$1****$2') }}</view>

				</view>
			</view>
			<!-- 第二行功能 -->
			<view class="quick-actions card"
				style="border-radius: 0rpx;;border-bottom-left-radius: 24rpx;border-bottom-right-radius:24rpx ;box-shadow:none;">
				<view class="action-item" v-for="action in quickActions" :key="action.id"
					@click="handleQuickAction(action)">
					<image :src="action.image" mode="aspectFit" class="action-icon"></image>
					<!-- <FontIcon v-else :name="action.icon || 'icon-address'" :size="action.size || 56" :color="action.color">
					</FontIcon> -->
					<text class="action-text">{{ action.text }}</text>
				</view>
			</view>

			<!-- 菜单卡片 -->
			<view class="menu-section card">
				<view class="section-header"><text class="section-title">功能菜单</text></view>
				<view class="menu-grid">
					<view class="menu-item" v-for="menu in functionMenus" :key="menu.id" @click="handleMenuClick(menu)">
						<view class="menu-icon" :style="{ background: menu.bgColor }">
							<FontIcon :name="menu.icon || 'icon-address'" :size="menu.size || 40"
								:color="menu.iconColor"></FontIcon>
						</view>
						<text class="menu-text">{{ menu.text }}</text>
					</view>
				</view>
			</view>

			<!-- 服务卡片 -->
			<view class="menu-section card">
				<view class="section-header"><text class="section-title">服务</text></view>
				<view class="settings-grid">
					<view class="setting-item" v-for="menu in serviceMenus" :key="menu.id"
						@click="handleServiceClick(menu)">
						<FontIcon :name="menu.icon" :size="menu.size || 40"
							:color="menu.color"></FontIcon>
						<text class="setting-text">{{ menu.text }}</text>
					</view>
				</view>
			</view>

			<!-- 设置卡片 -->
			<view class="settings-section card">
				<view class="section-header"><text class="section-title">设置</text></view>
				<view class="settings-grid">
					<view class="setting-item" v-for="setting in settings" :key="setting.id"
						@click="handleSettingClick(setting)">
						<FontIcon :name="setting.icon || 'icon-address'" :size="setting.size || 40"
							:color="setting.color"></FontIcon>
						<text class="setting-text">{{ setting.text }}</text>
					</view>
				</view>
			</view>
		</view>
		<global-tab-bar />
	</view>
</template>

<script>
import GlobalTabBar from '@/components/GlobalTabBar.vue';
import AdaptiveNavBar from '@/components/AdaptiveNavBar.vue';
import { request } from '@/utils/request.js';
export default {
	components: {
		GlobalTabBar,
		AdaptiveNavBar
	},
	async onShow() {
		await this.getMerchantInfo();
		await this.getMerchantItem();
		await this.getMerchantMedia();
	},

	data() {
		return {
			merchantInfo: {},
			merchantItem: {},
			merchantMedia: {},
			logoUrls: [],
			logo: '',
			// 快捷功能
			quickActions: [
				{ id: 1, text: '商户信息', icon: 'icon-renyuanguanli', image: '/static/myIcon/my-info.png', color: '#333', size: 56, action: 'goMerchantInfo' },
				{ id: 2, text: '规则中心', icon: 'icon-category', image: '/static/myIcon/my-guize.png', color: '#333', size: 56, action: 'goRuleCenter' },
				{ id: 3, text: '网站公告', icon: 'icon-announcement', image: '/static/myIcon/my-gonggao.png', color: '#333', size: 56, action: 'goNotice' },
				{ id: 4, text: '消息通知', icon: 'icon-xiaoxi', image: '/static/myIcon/my-message.png', color: '#333', size: 56, action: 'goMessages' }
			],
			// 功能菜单
			functionMenus: [
				{ id: 1, text: '交易管理', icon: 'icon-jiaoyiguanli', bgColor: '#FFF1E6', iconColor: '#FF8A00', size: 40, action: 'goTrade' },
				{ id: 2, text: '数据中心', icon: 'icon-shujuzhongxin', bgColor: '#E3F2FD', iconColor: '#007AFF', size: 40, action: 'goDataCenter' },
				{ id: 3, text: '财务中心', icon: 'icon-caiwuzhongxin', bgColor: '#E8F5E9', iconColor: '#34C759', size: 40, action: 'goFinance' },
				{ id: 4, text: '人员管理', icon: 'icon-renyuanguanli', bgColor: '#FFF3E0', iconColor: '#FFB800', size: 40, action: 'goStaff' }
			],
			// 服务菜单
			serviceMenus: [
				{ id: 1, text: '联系BD', icon: 'icon-shangjiarukou', color: '#000000', size: 40, action: 'goContactBD' },
				{ id: 2, text: '帮助中心', icon: 'icon-tushu', color: '#000000', size: 40, action: 'goHelpCenter' },
				{ id: 3, text: '联系客服', icon: 'icon-svg-zixun', color: '#000000', size: 40, action: 'goService' },
				{ id: 4, text: '意见反馈', icon: 'icon-yijianfankui2', color: '#000000', size: 40, action: 'goFeedback' }
			],
			// 设置菜单
			settings: [
				{ id: 1, text: '消息设置', icon: 'icon-tixingshezhi1', color: '#000000', size: 40, action: 'goMsgSetting' },
				{ id: 2, text: '隐私管理', icon: 'icon-yinsiguanli', color: '#000000', size: 40, action: 'goPrivacy' },
				{ id: 3, text: '发票管理', icon: 'icon-fapiaoguanli', color: '#000000', size: 40, action: 'goInvoice' },
				{ id: 4, text: '工作手册', icon: 'icon-gongzuoshouce', color: '#000000', size: 40, action: 'goWorkManual' }
			]
		};
	},
	methods: {
		//获取商户信息
		async getMerchantInfo() {
			const merchantInfo = uni.getStorageSync('companyInfo');
			if (merchantInfo) {
				this.merchantInfo = merchantInfo;
			}
		},
		//获取商户基本信息
		async getMerchantItem() {
			const res = await request({
				url: `/merchant-item/getByMerchantId?merchantId=${this.merchantInfo.id}`,
				method: 'GET',
				loading: true
			});
			this.merchantItem = res.data || {};
			console.log('商户基本信息', this.merchantItem);
		},
		//获取商家媒体信息
		async getMerchantMedia() {
			const res = await request({
				url: `/merchantMedia/${this.merchantInfo.id}`,
				method: 'GET',
				loading: true
			});
			this.merchantMedia = res.data || {};
			console.log('商户媒体信息', this.merchantMedia);
			this.logo = this.merchantMedia.logoUrls[0].url || this.merchantMedia.logoUrls[1].url
			console.log('商户logo', this.logo);
		},
		// 处理快捷操作
		handleQuickAction(action) {
			if (action.action && this[action.action]) {
				this[action.action](action);
			}
		},

		// 处理功能菜单点击
		handleMenuClick(menu) {
			if (menu.action && this[menu.action]) {
				this[menu.action](menu);
			}
		},

		// 处理服务菜单点击
		handleServiceClick(menu) {
			if (menu.action && this[menu.action]) {
				this[menu.action](menu);
			}
		},

		// 处理设置菜单点击
		handleSettingClick(setting) {
			if (setting.action && this[setting.action]) {
				this[setting.action](setting);
			}
		},

		// 示例事件
		goMerchantInfo() {
			console.log('进入商户信息页');
			uni.navigateTo({
				url: '/public/merchant/merchantInfo',
				success: () => {
					console.log('进入商户信息页');
				}
			});
		},
		gotoEdit() {
			//页面有问题 暂时禁止跳转
			return ; 
			uni.navigateTo({
				url: `/public/merchant/shopEdit?id=${this.merchantInfo.id}`,
				success: () => {
					console.log('进入编辑商户信息页');
				}
			});
		},
		goRuleCenter() {
			this.navTo('/public/ruleCenter/index');
		},
		goNotice() {
			this.navTo('/public/notice/index');
		},
		goMessages() {
			this.navTo('/public/messageNotice/index');
		},

		goTrade(menu) {
			this.navTo('/pages/trade/index');
		},
		goDataCenter(menu) {
			this.navTo('/pages/data/index');
		},
		goFinance(menu) {
			this.navTo('/pages/finance/index');
		},
		goStaff(menu) {
			this.navTo('/pages/staff/index');
		},

		goContactBD(menu) {
			this.navTo('/pages/service/bd');
		},
		goHelpCenter(menu) {
			this.navTo('/pages/service/help');
		},
		goService(menu) {
			this.navTo('/pages/service/kefu');
		},
		goFeedback(menu) {
			this.navTo('/pages/service/feedback');
		},

		goMsgSetting(setting) {
			this.navTo('/pages/setting/message');
		},
		goPrivacy(setting) {
			this.navTo('/pages/setting/privacy');
		},
		goInvoice(setting) {
			this.navTo('/pages/setting/invoice');
		},
		goWorkManual(setting) {
			this.navTo('/pages/setting/manual');
		},

		navTo(url) {
			uni.navigateTo({
				url
			});
		}
	}
};
</script>

<style lang="scss">
.app-container {
	width: 100%;
	height: 100vh;
	background-color: #f5f5f5;
}

.merchant-mine {
	padding: 24rpx;
	padding-bottom: 120rpx;
}

/* 卡片通用 */
.card {
	background: #fff;
	border-radius: 24rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
	margin-bottom: 24rpx;
}

/* 商户信息卡片 */
.merchant-header {
	display: flex;
	align-items: center;
	padding: 20rpx;
	background: #ffffff;
	border-radius: 16rpx;
}

.merchant-logo {
	width: 120rpx;
	height: 120rpx;
	background: #f0f0f0;
	border-radius: 12rpx;
	overflow: hidden;
	margin-right: 24rpx;
}

.merchant-logo image {
	width: 100%;
	height: 100%;
}

.merchant-info {
	flex: 1;
}

.merchant-name {
	font-size: 30rpx;
	color: #333;
	margin-bottom: 4rpx;
	display: flex;
	justify-content: start;
	align-items: center;
}

.merchant-company {
	font-size: 24rpx;
	color: #999;
	margin-bottom: 4rpx;
}

.merchant-contact {
	font-size: 24rpx;
	color: #666;
}

/* 功能区 */
.quick-actions {
	display: flex;
	justify-content: space-around;
	padding: 32rpx 0;
}

.action-item {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.action-icon {
	width: 48rpx;
	height: 48rpx;
}

.action-text {
	font-size: 26rpx;
	margin-top: 16rpx;
	color: #333;
}

/* 菜单 */
.section-header {
	padding: 24rpx 32rpx;
	border-bottom: 1rpx solid #f0f0f0;
}

.section-title {
	font-size: 32rpx;
	font-weight: bold;
}

.menu-grid {
	display: flex;
	flex-wrap: wrap;
	padding: 32rpx;
}

.menu-item {
	width: 25%;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 32rpx;
}

.menu-icon {
	width: 100rpx;
	height: 100rpx;
	border-radius: 24rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 16rpx;
}

.menu-text {
	font-size: 26rpx;
}

/* 设置 */
.settings-grid {
	display: flex;
	flex-wrap: wrap;
	padding: 32rpx;
}

.setting-item {
	width: 25%;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 32rpx;
}

.setting-text {
	font-size: 26rpx;
	margin-top: 12rpx;
}
</style>